import React, {Component} from 'react'
import {ScrollView, StatusBar, StyleSheet, View,} from 'react-native'
import ScrollableTabView, {DefaultTabBar,} from 'react-native-scrollable-tab-view'
import {connect} from 'react-redux'
import Spinner from 'react-native-loading-spinner-overlay'
import { PullView } from '../../widgets'
import { createAction, NavigationActions } from '../../utils'
import screen from '../../utils/screen'
import color from '../../utils/color'
import TimeChooser from './components/TimeChooser'
import AssetLiability from './AssetLiability'
import Profit from './Profit'
import CashFlow from './CashFlow'
import RateAnalyze from './RateAnalyze'


@connect(({ home, loading }) => ({ ...home, isLoading: loading.models.home }))
class Home extends Component {
  static navigationOptions = {
    title: '财务报表',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    headerTitleStyle: {
      color: 'white',
      fontSize: screen.pxToDp(30),
      marginLeft: screen.pxToDp(26),
    },
  }

  constructor(props) {
    super(props)
  }

  changeDate = (type, sTime, eTime) => {
    this.props.dispatch(createAction("home/changeTime")({
      mainTime: {
        timeType: type,
        startTime: sTime,
        endTime: eTime
      }
    }))
  }

  render() {
    const {  mainTime, isLoading } = this.props
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor={color.theme} />
        <Spinner visible={false} />
        <TimeChooser changeDate={this.changeDate} initTime={mainTime}/>
        <ScrollableTabView
          tabBarBackgroundColor={color.theme}
          tabBarActiveTextColor="#00195e"
          tabBarInactiveTextColor="#268db8"
          tabBarTextStyle={{
            fontSize: screen.pxToDp(30),
            fontWeight: 'normal',
          }}
          renderTabBar={() => <DefaultTabBar />}
        >
          <View style={{flex: 1}} tabLabel="资产负债表">
            <AssetLiability navigation={this.props.navigation}/>
          </View>
          <View style={{flex: 1}} tabLabel="利润表">
            <Profit navigation={this.props.navigation}/>
          </View>
          <View style={{flex: 1}} tabLabel="现金流量表">
            <CashFlow navigation={this.props.navigation}/>
          </View>
          <View style={{flex: 1}} tabLabel="比率分析">
            <RateAnalyze navigation={this.props.navigation}/>
          </View>
        </ScrollableTabView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default Home
